{% extends 'base/base.html' %}

{% block title %}
    套餐管理
{% endblock %}


{% block main %}
    {% if current_combo %}
    <div class="plan-hero">
        <h2>{{ current_combo.combo.name }}</h2>
        <div class="meta">当前号码：{{ phone.phonenumber }}</div>
    </div>
    {% else %}
    <div class="plan-hero">
        <h2>尚未选择套餐</h2>
        <div class="meta">当前号码：{{ phone.phonenumber }}</div>
    </div>
    {% endif %}
    <form method="post">
        {% csrf_token %}
        <div class="row">
            {% for combo in combos %}
            <div class="col-sm-6 col-lg-4" style="margin-bottom:16px;">
                <div class="card plan-card border-0 shadow-sm" data-plan-id="{{ combo.id }}" style="cursor:pointer;">
                    <div class="card-body text-center">
                        <h4 class="text-primary" style="margin-top:0;">{{ combo.name }}</h4>
                        <p class="text-muted small">{{ combo.info }}</p>
                        <div class="plan-price">¥{{ combo.price }}<small class="text-muted">/月</small></div>
                        <div class="row" style="margin-top:10px;">
                            <div class="col-xs-4">
                                <h5 class="text-info">{{ combo.traffic }}MB</h5>
                                <small class="text-muted">流量</small>
                            </div>
                            <div class="col-xs-4">
                                <h5 class="text-warning">{{ combo.talk_time }}分钟</h5>
                                <small class="text-muted">语音</small>
                            </div>
                            <div class="col-xs-4">
                                <h5 class="text-danger">{{ combo.message }}条</h5>
                                <small class="text-muted">短信</small>
                            </div>
                        </div>
                        <div class="form-check" style="margin-top:10px;">
                            <input class="form-check-input" type="radio" name="plan" value="{{ combo.id }}" id="plan{{ combo.id }}"
                                   {% if current_combo and current_combo.combo.id == combo.id %}checked{% endif %}>
                            <label class="form-check-label fw-bold" for="plan{{ combo.id }}">选择此套餐</label>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="text-center" style="margin-top:16px;">
            <button type="submit" class="btn btn-success btn-lg">确认选择</button>
        </div>
    </form>

    <script>
    (function(){
        var cards=document.querySelectorAll('.plan-card');
        function selectCard(card){
            var id=card.getAttribute('data-plan-id');
            var input=document.getElementById('plan'+id);
            if(input){input.checked=true;}
            Array.prototype.forEach.call(cards,function(c){c.classList.remove('border-primary')});
            card.classList.add('border-primary');
        }
        Array.prototype.forEach.call(cards,function(card){
            card.addEventListener('click',function(){selectCard(card)});
        });
    })();
    </script>

{% endblock %}